<template>
  <view class="swipe-action" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <view class="swipe-content" :style="{ transform: `translateX(${translateX}px)` }">
      <slot></slot>
    </view>
    <view class="swipe-actions" :style="{ width: `${actionsWidth}px` }">
      <view 
        v-for="(action, index) in actions" 
        :key="index"
        class="swipe-action-item"
        :style="{ backgroundColor: action.color || '#007AFF' }"
        @click="handleActionClick(action, index)"
      >
        <uni-icons v-if="action.icon" :type="action.icon" size="20" color="#fff"></uni-icons>
        <text class="action-text">{{ action.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

interface SwipeActionItem {
  text: string;
  icon?: string;
  color?: string;
  handler: () => void;
}

interface Props {
  actions: SwipeActionItem[];
  threshold?: number; // 触发阈值
}

interface Emits {
  (e: 'action', action: SwipeActionItem, index: number): void;
}

const props = withDefaults(defineProps<Props>(), {
  threshold: 60,
});

const emit = defineEmits<Emits>();

const translateX = ref(0);
const startX = ref(0);
const isDragging = ref(false);
const isOpen = ref(false);

const actionsWidth = computed(() => props.actions.length * 80);

const handleTouchStart = (e: TouchEvent) => {
  startX.value = e.touches[0].clientX;
  isDragging.value = true;
};

const handleTouchMove = (e: TouchEvent) => {
  if (!isDragging.value) return;
  
  const currentX = e.touches[0].clientX;
  const deltaX = currentX - startX.value;
  
  // 只允许向左滑动
  if (deltaX < 0) {
    translateX.value = Math.max(deltaX, -actionsWidth.value);
  } else if (isOpen.value) {
    // 如果已经打开，允许向右滑动关闭
    translateX.value = Math.min(0, -actionsWidth.value + deltaX);
  }
};

const handleTouchEnd = () => {
  if (!isDragging.value) return;
  
  isDragging.value = false;
  
  // 判断是否达到阈值
  if (Math.abs(translateX.value) > props.threshold) {
    // 打开操作栏
    translateX.value = -actionsWidth.value;
    isOpen.value = true;
  } else {
    // 关闭操作栏
    translateX.value = 0;
    isOpen.value = false;
  }
};

const handleActionClick = (action: SwipeActionItem, index: number) => {
  action.handler();
  emit('action', action, index);
  
  // 点击后关闭
  translateX.value = 0;
  isOpen.value = false;
};

// 暴露关闭方法
const close = () => {
  translateX.value = 0;
  isOpen.value = false;
};

defineExpose({
  close,
});
</script>

<style lang="scss" scoped>
.swipe-action {
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.swipe-content {
  transition: transform 0.3s ease;
  background-color: #fff;
  z-index: 2;
  position: relative;
}

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 1;
}

.swipe-action-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  padding: 10px;
  color: #fff;
}

.action-text {
  font-size: 12px;
  margin-top: 4px;
}
</style>